<template>
	<view class="wanl-list">

		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px'}" style="background:#FA6B6B !important;z-index:100">
			<view class="cu-bar" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="goback"><text class="wlIcon-fanhui1"></text></view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="gotohome"><text class="wlIcon-zhuye"></text></view>
				
				<view class="title" style="width:700rpx;text-align: center;padding-left:60rpx;font-weight:bold">人人聚商家</view>
				
			<!-- 	<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text> 
					<input @confirm="confirm" :adjust-position="false" type="text" :placeholder="category" confirm-type="search"></input>
				</view> -->
				<!-- <view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-10'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view> -->
			</view>
		</view>
		
		<view class="shopwrapper">
			<view class="card">
				<image style="border-radius: 10rpx;" class="shopimg" :src="shop_detail.avatar"></image>
				<view class="right">
					<view class="namewrapper">
						<view class="name">{{shop_detail.shopname}}</view>
						<view class="bio" style="color:#666;font-size:24rpx;margin-top:20rpx;"><text style="font-weight: bold; color:#333">人人聚商家</text>: {{shop_detail.bio.substr(0,35)}}</view>
					</view>
					
					<view class="item">
						<image src="/static/images/local1.png"></image>
						<view>{{shop_detail.address}}</view>
					</view>
					<view class="item">
						<image src="/static/images/time1.png"></image>
						<view>营业时间 {{shop_detail.biz_time}}</view>
					</view>
					<!-- <view class="tag">红包领取</view> -->
				</view>
				<image @click="makePhone" class="phone" src="/static/images/tel1.png"></image>
			</view>
		</view>
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue" >
				<view class="bar">
					<view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
					<view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<wanl-empty v-if="goodsData.length === 0 && status !== 'loading'" :text="empty"/>
		<wanl-product v-if="goodsData.length > 0" :dataList="goodsData" :dataStyle="liststyle"/>
		<uni-load-more v-if="goodsData.length > 0" :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom" style="height: 100rpx;"></view>
		
		
		<view class="wanlshop-shop-container__tabbar" :style="{ height: `${sys.tabbarHeight}px`, paddingBottom:`${sys.tabbarBottom}px` }">
			<view class="cu-bar tabbar">
				<view class="action" @tap="handleTabbar('/pages/find')">
					<view class="wlIcon-31shouye"></view>
					<view>主页</view>
				</view>
				<view class="action" @tap="handleTabbar('/pages/business')">
					<view class="wlIcon-dianpu"></view>
					<view>商城</view>
				</view>
				<view class="action" @tap="handleTabbar('/pages/local')">
					<view class="wlIcon-weizhi"></view>
					<view>本地生活</view>
				</view>
				<view class="action" @tap="handleTabbar('/pages/notice/notice')">
					<view class="wlIcon-xiaoxizhongxin"></view>
					<view>消息</view>
				</view>
				<view class="action" @tap="handleTabbar('/pages/user')">
					<view class="wlIcon-31wode"></view>
					<view>我的</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sys: {
					headTop: 0,
					headHeight: 0,
					mainHeight: 0,
					tabbarBottom: 0,
					tabbarHeight: 0,
				},
				shop_id: 0,
				shop_detail:{},
				empty: '',
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				//liststyle: 'col-2-10', //列表样式
				liststyle: 'col-1-10', //列表样式
				goodsData: [], //商品列表数据
				category: '',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				pagesNum: 0
			};
		},
		onReady() {
			let sys = uni.getSystemInfoSync(),
				headHeight = sys.statusBarHeight + uni.upx2px(88), //1.1.2升级
				tabbarHeight = sys.safeAreaInsets.bottom + uni.upx2px(100);
			this.sys = {
				headTop: sys.statusBarHeight,  //1.1.2升级
				headHeight: headHeight,
				mainHeight: sys.windowHeight - headHeight,
				tabbarBottom: sys.safeAreaInsets.bottom,
				tabbarHeight: tabbarHeight
			}
		}, 
		onLoad(option) {
			let that = this;
			if(option['scene']){  
				let obj = decodeURIComponent(option['scene']);
				if(obj.indexOf("=")>0){
					let s = obj.split("=");
					if(s[1]){
						this.shop_id = s[1]; 
						console.log("shop_id00 = " + this.shop_id);
						if(this.shop_id){
							option.shop_id = this.shop_id;
						}
					}
				}
			}  
				
			this.pagesNum = getCurrentPages().length; // 1.1.9 升级 
			if(!this.shop_id){/*兼容之前的逻辑*/
				this.shop_id = option.shop_id? option.shop_id : this.shop_id; 
			} 
			
			//通过shopid 获取商户信息
			uni.request({
				url:"/wanlshop/shop/getShopDetail",
				data:{id:this.shop_id},
				success(res){
					that.shop_detail = res.data.data;
				}
			})
			
			
			if(option.category_id){
				this.params.filter.shop_category_id = option.category_id;
				this.params.op.shop_category_id = 'FIND_IN_SET'; //1.0.2升级
				if(option.category_name){
					this.category = '当前店铺类目:' + option.category_name;
				}else{
					this.category = '搜索店铺商品';
				}
				this.loadData();
				if (this.goodsData.length == 0) {
					this.empty = '没有查询到“'+this.category+'”的相关宝贝，以下为您推荐猜你喜欢的商品~';
				}
			}else{
				this.params.filter.shop_id = option.shop_id;
				console.log(" option.shop_id = " +  option.shop_id);
				this.params.op.shop_id = 'in';
				this.category = '搜索店铺商品';
				this.status = 'more';
				this.loadData();
				if (this.goodsData.length == 0) {
					this.empty = '暂时没有在店铺内找到任何产品~';
				}
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page  = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		methods: { 
			
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			
			gotohome(){
				uni.switchTab({
					url:"/pages/local"
				})
			},
			
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.shop_detail.mobile
				})
			},
			
			
			//异步加载商品列表
			async loadData() {
				await uni.request({
					url: '/wanlshop/product/lists',
					data: this.params,
					success: res => {
						uni.stopPullDownRefresh(); // 后来统一补充，尚不知道是否有效在此处
						this.status = res.data.total == 0 ? 'noMore':'more';
						this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					}
				});
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}
	
				// 排序方式
				if (index === 0) {
					this.params.sort = 'weigh';
					this.params.order = 'asc';
				}
				if (index === 1) {
					this.params.sort = 'sales';
					this.params.order = 'asc';
				}
				if (index === 2) {
					this.params.sort = 'createtime';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = 'price';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = 'price';
					this.params.order = 'desc';
				}
				this.status = 'loading';
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},
			editListstyle() {
				if (this.liststyle == 'col-1-10') {
					this.liststyle = 'col-2-10';
				} else {
					this.liststyle = 'col-1-10';
				}
			},
			confirm(event){
				this.category = event.detail.value;
				this.params.search = event.detail.value;
				this.params.filter = { shop_id: this.shop_id };
				this.params.op = { shop_id: '='};
				this.reload = true;
				this.loadData();
				
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},
			handleTabbar(url){
				uni.switchTab({
					url:url
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.cu-bar .search-form{
		background-color: #ebebeb;
	}
	.wanlshop-shop-container__tabbar{
		background-color: rgb(255, 255, 255);
		z-index: 998;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	.shopwrapper{
		width:100%;
		padding:32rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom,#FA6B6B 20%,#fff);
		.card{
			position:relative;
			border-radius: 20rpx;
			padding:20rpx;
			box-sizing: border-box;
			width:100%;
			background:#fff;
			margin:0 auto;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.shopimg{
				width:198rpx;
				height:246rpx;
			}
			.right{
				flex:1;
				display:flex;
				flex-flow: column nowrap;
				justify-content: space-between;
				align-items: flex-start;
				padding-left:20rpx;
				height:246rpx;
				.name{
					font-weight: bold;
				}
				.item{
					display:flex;
					justify-content: flex-start;
					align-items: center;
					image{
						width:48rpx;
						height:48rpx;
					}
					
				}
				.tag{
					color:#F95352;
					padding: 5rpx 10rpx;
					background:#FFECEC;
					display: inline-block;
					border-radius: 10rpx;
				}
			}
			.phone{
				position:absolute;
				top:10rpx;
				right:30rpx;
				width:52rpx;
				height:52rpx;
			}
		}
	}
</style>
